<template>
  <div class="screen-wrapper">
    <map-view></map-view>
    <!-- 全屏切换按钮 -->
    <div class="fullscreen-btn" @click="toggleFullScreen">
      <i :class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"></i>
    </div>
  </div>
</template>

<script>
import MapView from '@/components/Screen/index'
import request from '@/utils/request'

export default {
  name: 'Screen',
  components: {
    MapView
  },
  data() {
    return {
      isFullscreen: false,
      stats: {
        totalHouses: 0,
        normalRiskHouses: 0,
        highRiskHouses: 0,
        houseFiles: 0,
        deviceAlerts: 0
      }
    }
  },
  methods: {
    toggleFullScreen() {
      if (!this.isFullscreen) {
        const element = document.documentElement
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      }
      this.isFullscreen = !this.isFullscreen
    },
    // 获取统计数据
    async getStats() {
      try {
        const res = await request({
          url: '/screen/stats',
          method: 'get'
        })
        if (res.code === 200) {
          this.stats = res.data
        }
      } catch (error) {
        console.error('获取统计数据失败:', error)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getStats() // 获取统计数据
      // 添加窗口大小变化监听
      window.addEventListener('resize', this.handleResize)
    })
    // 监听全屏变化事件
    document.addEventListener('fullscreenchange', () => {
      this.isFullscreen = document.fullscreenElement !== null
    })
    document.addEventListener('webkitfullscreenchange', () => {
      this.isFullscreen = document.webkitFullscreenElement !== null
    })
    document.addEventListener('mozfullscreenchange', () => {
      this.isFullscreen = document.mozFullscreenElement !== null
    })
    document.addEventListener('MSFullscreenChange', () => {
      this.isFullscreen = document.msFullscreenElement !== null
    })
  },
  beforeDestroy() {
    // 移除事件监听
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange)
    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange)
    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange)
  }
}
</script>

<style scoped>
.screen-wrapper {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.fullscreen-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(30, 85, 120, 0.65);
  border: 1px solid #039BE5;
  color: #E1F5FE;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(3, 155, 229, 0.25);
}

.fullscreen-btn:hover {
  background: rgba(30, 85, 120, 0.8);
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(3, 155, 229, 0.3);
}

.fullscreen-btn i {
  font-size: 20px;
}
</style>